<template>
    <!-- 地址管理页面 -->
    <div class="adress">
        <!-- 使用公共组件页面顶部 -->
        <Header title="地址管理" />
        <div class="conter">
            <!-- 地址管理的列表：显示所有的地址列表 -->
            <!-- 参数说明  list：要显示的-->
            <!-- edit： 	点击编辑按钮时触发，返回点击编辑的那个地址的数据-->
            <!-- add：点击新增地址按钮触发的事件，没有返回值 -->
            <van-address-list :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
        </div>
    </div>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted, onBeforeMount, beforeUnmount } from 'vue';
import Header from '../../components/Store_header.vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import mitter from '../.././common/js/mit';

export default defineComponent({
    name: 'App',
    components: {
        Header
    },
    setup() {
        const store = useStore();
        const router = useRouter();
        const data = reactive({
            // 创建一个列表用于存储初始化后的数据，并进行响应式处理
            list: []
        })
        // 初始化列表数据，因为修改数据的时候地址的省市县是分开的，所有储存的数据也是分开的，在这里我们要把它们合起来，
        // 通过遍历userAddress中的数据将地址的数据进行拼接然后生成一个新的数组
        const init = () => {
            data.list = store.state.userAddress.map(item => {
                return {
                    id: item.id,
                    name: item.name,
                    tel: item.tel,
                    adress: `${item.province}${item.city}${item.county}${item.addressDetail}`,
                    isDefault: !!item.isDefault
                }

            })
        }
        // 在组件挂载后，对地址进行初始化，重新拼接获取
        onMounted(() => {
            init()

        })
        // 点击地址编辑事件
        // 点击编辑后，跳转至，编辑地址的页面，并携带相关数据，地址的id，类型：用于判断是从编辑按钮跳转的还是从增加地址按钮跳转的
        const onEdit = (item) => {
            router.push({
                path: '/earess',
                query: {
                    id: item.id,
                    type: "change",
                    len: data.list.length
                }


            })

        }
        // 点击新增按钮后触发的事件方法，跳转至编辑地址页面，并携带数据，type用于判断是从编辑按钮跳转的还是从增加地址按钮跳转的
        const onAdd = () => {
            router.push({
                path: '/earess',
                query: {
                    type: 'add',

                }
            })
        }
        return {
            store,
            ...toRefs(data),
            onEdit,
            onAdd
        }


    }
})
</script>
<style lang="less" scoped>
/deep/ .van-icon-success {
    display: none;
}

/deep/ .van-tag--primary {
    background-color: red;
}
</style>